<template>
    <view class="register">
        <view class="content">
            <!-- 头部logo -->
            <view class="header">
                <image :src="logoImage"></image>
            </view>
            <!-- 主体 -->
            <view class="main">
                <wInput
                    v-model="userName"
                    type="text"
                    maxlength="20"
                    placeholder="用户名"
                ></wInput>
                <wInput
                    v-model="passData"
                    type="password"
                    maxlength="11"
                    placeholder="登录密码"
                    isShowPass
                ></wInput>
                <wInput
                    v-model="confirmPass"
                    type="password"
                    maxlength="11"
                    placeholder="确认密码"
                    isShowPass
                ></wInput>
                <wButton
                    class="wbutton"
                    text="注 册"
                    :rotate="isRotate"
                    @click.native="startReg()"
                ></wButton>
            </view>
            <!-- 底部信息 -->
            <view class="footer">
                <text
                    @tap="isShowAgree"
                    class="cuIcon"
                    :class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
                > 同意</text>
                <!-- 协议地址 -->
                <navigator url="" open-type="navigate">《协议》</navigator>
            </view>
        </view>
    </view>
</template>

<script>
	import config from '@/utils/config.js';
    let _this;
    import wInput from '../../components/watch-login/watch-input.vue' //input
    import wButton from '../../components/watch-login/watch-button.vue' //button

    export default {
        data() {
            return {
                logoImage: '../../static/common/icon/logo1.png',
                // 用户名数据字段
                userName: '', 
                passData: '', //密码
                confirmPass: '', // 确认密码
                showAgree: true, //协议是否选择
                isRotate: false, //是否加载旋转
            }
        },
        components: {
            wInput,
            wButton,
        },
        mounted() {
            _this = this;
        },
        methods: {
            isShowAgree() {
                //是否选择协议
                _this.showAgree =!_this.showAgree;
            },
            startReg() {
                //注册
                if (this.isRotate) {
                    //判断是否加载中，避免重复点击请求
                    return false;
                }
                if (this.showAgree == false) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '请先同意《协议》'
                    });
                    return false;
                }
                // 验证用户名非空且长度在合理范围
                if (this.userName === '') {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '用户名不能为空'
                    });
                    return false;
                } else if (this.userName.length > 20) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '用户名长度不能超过 20 个字符'
                    });
                    return false;
                }
                if (this.passData.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '密码不正确'
                    });
                    return false;
                }
				
                if (this.passData!== this.confirmPass) {
                    uni.showToast({
                        icon: 'none',
                        position: 'bottom',
                        title: '两次输入密码不一致，请重新输入'
                    });
                    return false;
                }
				
				uni.showLoading({
					title: '注册中'
				});
				uni.request({
					url: `${config.apiBaseUrl}/user/register`,
					method: 'POST',
					data: {
						username: this.userName,
						password: this.passData
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.data && res.data.data.token != null && res.data.code == 1) {
							// 显示注册成功提示信息
							uni.showToast({
								icon: 'success',
								position: 'bottom',
								title: '注册成功'
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '../login/login'
								});
							}, 1000);
						} else {
                            // 注册失败，判断是否是用户名已存在的情况
                            if (res.data.code == 0 ) {
                                uni.showToast({
                                    icon: 'success',
                                    position: 'bottom',
                                    title: '该账号已存在'
                                });
								// 清空输入框数据
								_this.userName = '';
								_this.passData = '';
								_this.confirmPass = '';
                            } else {
                                uni.showToast({
                                    icon: 'error',
                                    position: 'bottom',
                                    title: res.data.message || '注册失败，请稍后重试'
                                });
								_this.userName = '';
								_this.passData = '';
								_this.confirmPass = '';
                            }
                        }
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							position: 'bottom',
							title: '注册失败，请检查网络或稍后重试'
						});
					}
				});
                _this.isRotate = true;
                setTimeout(function () {
                    _this.isRotate = false;
                }, 3000)
            }
        }
    }
</script>

<style>
    @import url("../../components/watch-login/css/icon.css");
    @import url("./css/main.css");
</style>